<template>
  <!-- 单个评论项 -->
  <div class="comment-item">
    <!-- 评论人相关信息 -->
    <div class="flex-item">
      <div class="imgPersonWrap">
        <img
          src="https://file.ituring.com.cn/SmallCover/200564fc749ec9cf4615"
          alt=""
          class="avator"
        />
        <div class="person">
          <div class="name">{{ comment.userNickName }}</div>
          <div class="time">{{ comment.commentDate.split('T')[1] }}</div>
        </div>
      </div>
      <div class="float-right">
        <span>推荐</span>
        <span class="num">{{ comment.voteCount }}</span>
        <span @click="isReply = !isReply">回复</span>
      </div>
    </div>
    <!-- 评论具体内容 -->
    <p class="comment-content">
      {{ comment.content }}
    </p>
    <!-- 回复评论区域 -->
    <CommentReply v-show="isReply"></CommentReply>
    <!-- 评论中的回复 -->
    <div class="replies-view">
      <div class="flex-item" v-for="item in comment.replies" :key="item.id">
        <div class="item">
          <div class="imgPersonWrap">
            <img
              src="https://file.ituring.com.cn/SmallCover/200564fc749ec9cf4615"
              alt=""
              class="avator"
            />
            <div class="person">
              <div class="name">{{item.userNickName}}</div>
              <div class="time">{{item.replyDate}}</div>
            </div>
          </div>
          <div class="float-right">
            <span @click="isReplies = !isReplies">回复</span>
          </div>
        </div>
        <p class="comment-content">{{item.content}}</p>
        <CommentReply v-show="isReplies"></CommentReply>
      </div>
      <!-- <div class="flex-item">
        <div class="item">
          <div class="imgPersonWrap">
            <img
              src="https://file.ituring.com.cn/SmallCover/200564fc749ec9cf4615"
              alt=""
              class="avator"
            />
            <div class="person">
              <div class="name">尼玛</div>
              <div class="time">2012-09-27 18:19:42</div>
            </div>
          </div>
          <div class="float-right">
            <span>回复</span>
          </div>
        </div>
        <p class="comment-content">谢谢~~~~</p>
        <CommentReply></CommentReply>
      </div> -->
    </div>
  </div>
</template>

<script>
import CommentReply from './CommentReply'

export default {
  name: 'Comment',
  components: {
    CommentReply
  },
  props: {
    comment: {
      type: Object,
      default: () => ({ commentDate: '' })
    }
  },
  data() {
    return {
      // 文章评论回复
      isReply: false,
      // 文章评论回复的回复
      isReplies: false
    }
  },
  methods: {}
}
</script>

<style scoped>
.comment-item > .flex-item {
  display: flex;
  align-items: center;
  padding-top: 16px;
  justify-content: space-between;
}
.imgPersonWrap {
  display: flex;
  align-items: center;
  padding-top: 16px;
}
.flex-item .avator {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  margin-right: 12px;
  border-radius: 50%;
  cursor: pointer;
}
.person .name {
  color: #152844;
  font-weight: 600;
  font-size: 14px;
  line-height: 22px;
  height: 22px;
  cursor: pointer;
}
.person .time {
  color: #5f77a6;
  font-size: 12px;
  line-height: 16px;
  height: 16px;
  margin-top: 2px;
}
.float-right {
  color: #4684e2;
  font-size: 14px;
  display: flex;
  justify-content: space-around;
}
.float-right span {
  margin: 0 5px;
  cursor: pointer;
}
.float-right span:nth-child(2) {
  margin-left: 0;
  margin-right: 10px;
  color: #000;
}

p.comment-content {
  margin-top: 8px;
  color: #484848;
  font-size: 14px;
  line-height: 22px;
  padding-bottom: 16px;
  border-bottom: 1px dashed #cedce4;
  margin-left: 52px;
  overflow: hidden;
  word-break: break-word;
}
/* 评论回复区 */
.replies-view {
  margin-left: 52px;
}
.replies-view .flex-item {
  padding-top: 16px;
}
.replies-view .flex-item .item {
  display: flex;
  justify-content: space-between;
}
.replies-view .flex-item .item .imgPersonWrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
}
</style>
